<template>
  <div class="cnbbx">
    <codemirror :value="code" :options="options" ref="myEditor"></codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror-lite'
import '../../formatting'
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/php/php'
import 'codemirror/mode/clike/clike'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/hint/css-hint'
import 'codemirror/addon/hint/show-hint'

export default {
  name: 'CodeEditer',
  components: {
    codemirror
  },
  data () {
    return {
      options: {
        lineNumbers: true,
        viewportMargin: Infinity,
        smartIndent: true, // 是否智能缩进
        tabSize: 4, // Tab缩进，默认4
        readOnly: false, // 是否只读，默认false
        showCursorWhenSelecting: true,
        matchBrackets: true,
        indentUnit: 4,
        theme: 'monokai',
        indentWithTabs: true
      },
      filePath: '',
      something: 'text/html',
      code: `<script>\nfunction myScript(){return 100;}\n<\/script>`
    }
  },
  computed: {
    editor () {
      // get current editor object
      return this.$refs.myEditor.editor
    }
  },
  mounted () {
    let _this = this
    _this.filePath = document.referrer.replace(document.location.origin, '')
    // use editor object...
    _this.editor.setOption('mode', this.something)
    _this.editor.setOption('extraKeys', {
      'Ctrl-Q': 'autocomplete',
      'Ctrl-S': function (editor) {
        _this.axios({
          method: 'POST',
          url: 'http://code.v.cnbbx.com/index/Index/saveFile',
          data: _this.qs.stringify({
            filePath: _this.filePath,
            fileTxt: editor.getValue().replace(/\t/g, '    ')
          })
        }).then(function (resp) {
          console.log('保存状态：' + resp.data)
        }).catch(resp => {
          console.log('请求失败：' + resp.status + ',' + resp.statusText)
        })
      },
      'F7': function (editor) {
        var totalLines = editor.lineCount()
        editor.autoFormatRange({
          line: 0,
          ch: 0
        }, {
          line: totalLines
        })
      }
    })
    _this.editor.focus()
    _this.axios({
      method: 'POST',
      url: 'http://code.v.cnbbx.com/index/Index/loadFile',
      data: _this.qs.stringify({
        filePath: _this.filePath
      })
    }).then(function (resp) {
      _this.code = resp.data
    }).catch(resp => {
      console.log('请求失败：' + resp.status + ',' + resp.statusText)
    })
  },
  methods: {
  }
}

</script>
<style>
.cnbbx .CodeMirror {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0;
  bottom: 0px;
  border: 1px solid #eee;
  font-family: "方正姚体简体", "方正姚体" !important;
  font-size: 20px;
  overflow: hidden;
  border: 1px solid #eee;
  height: 100%;
}

.cnbbx .CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}
</style>>
